<template>
  <div>
    <div>
      <span class="span1">题目名称:</span>
      {{ data.question ? data.question.name : "" }}
    </div>
    <div>
      <span class="span1">提交用户:</span>
      {{ data.user ? data.user.name : "" }}
    </div>
    <div>
      <span class="span1">是否使用:</span>
      {{ ["未处理", "已使用", "已拒绝"][data.isuse] }}
    </div>
    <div>
      <span class="span1">备注:</span>
      {{ data.context }}
    </div>
    <div>
      <span class="span1">测试点：</span>
    </div>

    <div v-if="data.type === 'url'">
      <div>输入</div>
      <div>
        <a :href="data.input" target="_blank">下载</a>
      </div>
      <div>输出</div>
      <div>
        <a :href="data.output" target="_blank">下载</a>
      </div>
    </div>
    <div v-else>
      <div>输入</div>
      <div>
        <pre v-text="data.input"></pre>
      </div>
      <div>输出</div>
      <div>
        <pre v-text="data.output"></pre>
      </div>
    </div>

    <div>
      <span class="span1">题解结果：</span>
    </div>
    <div v-for="(t, i) in data.testcasesaccepted" :key="i">
      题解一：{{ Isstderr(t).abbreviation }}
    </div>
    <div>
      <span class="span1">是否显示:</span>
      <el-radio v-model="radio1" :label="true">不显示</el-radio>
      <el-radio v-model="radio1" :label="false">显示</el-radio>
    </div>
    <div v-if="!data.isuse">
      <el-button @click="submit(true, { ...data, isuse: 1 })">通过</el-button>
      <el-button @click="dialogVisible = true">拒接</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="拒接" width="30%">
      <div>
        <el-form :model="form" label-width="120px">
          <el-form-item label="拒接理由">
            <el-select v-model="form.name" filterable allow-create default-first-option>
              <el-option v-for="(v, i) in options" :key="v + i" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.examine"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit(false, { ...data, isuse: 2 })">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  PropType,
  reactive,
  ref,
  watch,
} from "vue";
import {
  asyncchangequestiontestcasesuser,
  asynccreateorupdatenotice,
  asyncselectquestiontestcasesuser,
} from "../../../api/index";
import { Questiontestcasesuser } from "../data/index";
import { ElMessage, ElMessageBox } from "element-plus";
import Isstderr from "../../../util/isstderr";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
export default defineComponent({
  props: {
    ID: Number as PropType<number>,
    next1: Function as PropType<() => void>,
  },
  setup(p) {
    watch(
      () => p.ID,
      () => {
        if (p.ID) {
          start();
        }
      }
    );
    const data = reactive<typeof Questiontestcasesuser>({});
    const dialogVisible = ref(false);
    async function start() {
      const { rows } = await asyncselectquestiontestcasesuser({
        ID: p.ID,
      });
      Object.assign(data, rows[0]);
    }

    const options = ref([
      {
        value: "已经有类似的测试点",
        label: "已经有类似的测试点",
      },
      {
        value: "输入的数据错误",
        label: "输入的数据错误",
      },
      {
        value: "输出的数据错误",
        label: "输出的数据错误",
      },
    ]);

    const form = reactive({
      name: "",
      context: "",
    });
    const radio1 = ref(false);

    onMounted(() => {
      start();
    });

    async function submit(
      t: boolean,
      data: typeof Questiontestcasesuser,
      msg?: string
    ) {
      if (t) {
        ElMessageBox.confirm(`确定要${t ? '通过' : '拒绝'}次测试点`, "确定", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(async () => {
            const testcases: Studycodemodel.Itestcases = {
              input: data.input,
              output: data.output,
              type: data.type,
              questionid: data.questionid,
              isshow: radio1.value,
            };
            await asyncchangequestiontestcasesuser({ ...data, testcases });
            if (p.next1) {
              p.next1();
            }
          })
          .catch(() => { });
      } else {
        await asyncchangequestiontestcasesuser({ ...data, examine: form.name });
        dialogVisible.value = false;
        if (p.next1) {
          p.next1();
        }
      }
    }

    return {
      data,
      submit,
      dialogVisible,
      form,
      Isstderr,
      options,
      radio1,
    };
  },
});
</script>

<style scoped>
pre {
  background-color: #f8f8f8;
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  border: #ddd solid 1px;
  border-radius: 3px;
  overflow: auto;
  font-size: 0.875em;
  font-family: monospace;
  min-height: 30px;
}

.span1 {
  display: inline-block;
  line-height: 26px;
  color: var(--color-cheng);
}
</style>
